<%--
  Created by IntelliJ IDEA.
  User: wlc
  Date: 2018/1/26
  Time: 17:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="PageFrame.jsp"%>

<link rel="stylesheet" type="text/css" href="../css/magicBtn.css"/>
<link rel="stylesheet" href="../css/style-loading.css" type="text/css"/>
<script src="../js/magicBtn.min.js" type="text/javascript"></script>


<title>数据查找-QM</title>

<!-- Page Content -->
<div class="container background_form" id="search_QM">
    <div class="content">
        <div class="form-group jumbotron" id="search_panel">
            <div class="row" id="row1">
                <h1><label>搜索QM数据</label></h1>
            </div>
            <div class="row" id="row2">
                <div class="col-md-3 col-sm-3 col-xs-3" id="c1">
                    <span>
                        <select class="form-control" id="qm_search_base">
                            <option>作者</option>
                            <option>日期</option>
                            <%--<option>CAS号</option>--%>
                        </select>
                    </span>
                </div>
                <div class="col-md-9 col-sm-9 col-xs-9" id="search_button">
                    <span id="c2">
                        <input type="search" id="qm_search_keyword" class="form-control" placeholder="请输入要查找关键词" autocomplete="off">
                    </span>
                    <span id="c3">
                        <button type="submit" id="qm_search" onclick="search_QM_data()" class="magicBtn material">搜索</button>
                    </span>
                    <div id="c4" hidden>
                        <span>共</span><span id="search_qm_data_num" style="background-color: #F1C40F">0</span><span>条数据</span>
                    </div>
                </div>
            </div>
        </div>
        <div id="qm_show_panel" hidden>
            <table class="table table-bordered">
                <thead style="background-color: #f3f3f3;">
                <tr>
                    <th style="width: 20%">ID</th>
                    <th style="width: 20%">作者</th>
                    <th style="width: 20%">日期</th>
                    <th style="width: 20%">CAS号</th>
                    <th style="width: 20%;">计算对象</th>
                </tr>
                </thead>
            </table>
            <div id="qm_data_tbody">
                <table id="show_qm_data"  class="table table-bordered table-hover">
                    <thead>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <div>
                <div id="qm_search_result_Total_select" style="float: left">
                    <span class="fa-stack fa-lg">
                        <i class="fa fa-square-o fa-stack-1x"></i>
                    </span>
                    <span style="margin-left: -10px;">全选</span>
                </div>
                <form action="./generate_qm_select_result" target="_blank" method="post" enctype="multipart/form-data">
                    <div style="margin-top: 5px">
                        <input type="hidden" id="form_base" name="form_base">
                        <input type="hidden" id="form_key" name="form_key">
                        <input type="hidden" id="qm_select_result" name="qm_select_result">
                        <button class="btn btn-primary btn-sm" type="submit" id="submit"
                                onclick="generate_qm_select_result();">生 成
                        </button>
                        <span> （请选择相同数据对象）</span>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- /Page Content -->

<!-- js-->
<%--search_QM_data--%>
<script type="text/javascript">
    $.magicBtn('#search_button',{
        buttonType: 'material'
    });
    function search_QM_data(){
        $("#loading #loading1 #loading2").trigger("create");
        var base = document.getElementById("qm_search_base").value;
        var keyword = document.getElementById("qm_search_keyword").value;

        if (keyword !== "" && keyword !== undefined) {
            $('#qm_search').startLoading({
                loadingText:"搜索中...",
                loadingIcon:true,
                'icon': '<div  id="loading" class="loader loader-1">\n' +
                '  <div id="loading1" class="loader-outter"></div>\n' +
                '  <div id="loading2" class="loader-inner"></div>\n' +
                '</div> '
            });

            $.ajax({
                url: 'keyword_search_QM' ,
                type: 'POST',
                data: { base: base, keyword: keyword},
                success: function (returndata){
                    if (returndata.replace(/[\r\n]/g, "") !== ""){
                        create_show_panel();
//                        清空表格内容
                        var table = document.getElementById('show_qm_data');
                        var tbody = table.children[1];
                        var childrenNum = tbody.children.length;
                        for (var i = 0;i < childrenNum;i++){
                            tbody.removeChild(tbody.children[0]);
                        }
//                        写入数据
                        var search_result_arr = returndata.split("wlcniubi");
                        document.getElementById("search_qm_data_num").innerHTML = search_result_arr.length;
                        for (var i=0;i<search_result_arr.length;i++){
                            var row_arr = search_result_arr[i].split("lxyniubi");
                            create_table_row(row_arr,i);
                        }
                    }
                    else {
                        alert("Data not found");
                        $('#qm_search').removeLoading({
                            text : '搜索'
                        });
                    }
                },
                error: function (returndata){
                    alert("search failed!");
                    $('#qm_search').removeLoading({
                        text : '搜索'
                    });
                }
            });
        } else {
            alert("keyword is empty!");
        }
    }
    function create_show_panel() {
        $('#search_qm_data_num').removeAttr("hidden");
        $('#qm_show_panel').removeAttr("hidden");
        $('#row1').attr("hidden","hidden");
        $('#search_panel').addClass('search-mini');
    }
    function create_table_row(arr_content,row_num) {
        var table = document.getElementById('show_qm_data');
        var tbody = table.children[1];
        var tr = document.createElement('tr');
        for(var i=0; i<arr_content.length; i++){
            var td = document.createElement('td');
            var span = document.createElement('span');
            span.appendChild(document.createTextNode(arr_content[i]));
            td.appendChild(span);
            td.style.width = "20.175%";
            td.id = "search_result-"+row_num+"-"+i;
            tr.appendChild(td);
        }
        tr.id = "search_result-"+row_num;
        tbody.appendChild(tr);
        $('#qm_search').removeLoading({
            text : '搜索'
        });
    }
</script>
<%--click_event_listener--%>
<script type="text/javascript">
    document.onclick = function (e) {
        var evt=e||window.event;               //保证兼容性
        var tar=evt.target||evt.srcElement;  //获取触发事件的元素

        if (tar.tagName.toLowerCase() === "td"){
            var tbody = document.getElementById("show_qm_data").children[1];
            var tbodyName = tar.id.split("-")[0];
            var tbodyRow = tar.id.split("-")[1];
            var tbodyCol = tar.id.split("-")[2];
            if (tbodyName === "search_result"){
                tbody.children[tbodyRow].style.backgroundColor = tbody.children[tbodyRow].style.backgroundColor === "rgb(209, 209, 209)"? "#FFFFFF":"#D1D1D1";
            }
        }
        else if(tar.tagName.toLowerCase() === "i"){
            var span = document.getElementById("qm_search_result_Total_select").children[0];
            if (span.children.length === 1){
                span.innerHTML += '<i class="fa fa-check fa-stack-1x" style="color: #13780D"></i>';
                var tbody = document.getElementById("show_qm_data").children[1];
                for (var i = 0;i < tbody.children.length;i++){
                    tbody.children[i].style.backgroundColor = "#D1D1D1";
                }
            }else{
                span.children[1].remove();
                var tbody = document.getElementById("show_qm_data").children[1];
                for (var i = 0;i < tbody.children.length;i++){
                    tbody.children[i].style.backgroundColor = "#FFFFFF";
                }
            }
        }
    };
</script>
<%--generate_qm_select_result--%>
<script type="text/javascript">

    var select_label = 0;
    function generate_qm_select_result() {
        var select_result = [];
        var selected_type = [];

        var submit_btn = document.getElementById("submit");

        var tbody = document.getElementById("show_qm_data").children[1];
        for (var i = 0;i < tbody.children.length;i++){
            if (tbody.children[i].style.backgroundColor === "rgb(209, 209, 209)"){
                select_result.push(tbody.children[i].children[0].children[0].innerHTML);
                var cal_type = tbody.children[i].children[4].children[0].innerHTML.replace(/\r\n/g,"");
                selected_type.push(cal_type);
            }
        }

        if(selected_type.length === 1) {
            document.getElementById("qm_select_result").value = select_result.join('wlcniubi');
            document.getElementById("qm_select_result").onsubmit();
        } else {
            for(var i = 1,len = selected_type.length; i < len ; i++) {
                if(selected_type[i] !== selected_type[i - 1]) {
                    alert("请选择相同类型数据展示.")
                    return false;
                } else {
                    document.getElementById("qm_select_result").value = select_result.join('wlcniubi');

                }
            }
        }
        console.log("form_base:" + document.getElementById("qm_search_base").value);
        document.getElementById("form_base").value = document.getElementById("qm_search_base").value;
        document.getElementById("form_key").value = document.getElementById("qm_search_keyword").value;

        console.log("form_base:" + document.getElementById("form_base").value);
    }

</script>
<!-- /js-->